<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Abertura de Firma
        </ui:define>

        <ui:define name="content">
            <h:form id="cadastrarPessoaForm">

                <p:messages id="cadastrarPessoaMessages" autoUpdate="true" />
                <div class="row">
                    <div class="column12">
                        <p:commandButton styleClass="adicionar" oncomplete="widthFix()" 
                                         style="float: right;"
                                         onclick="depositanteDialog.show();" process="@this" update="@this"
                                         immediate="true" value="Pesquisar" icon="ui-icon-search" />
                    </div>
                </div>

                <p:fieldset legend="Dados" id="dadosFieldset">
                    <div class="row">
                        <div class="column10">
                            <div class="row">
                                <div class="column2">
                                    <p:outputLabel value="Tipo" for="nomeInputText"
                                                   rendered="#{ managerCriarPessoa.pessoa.id == null }" />
                                </div>                        
                                <div class="column10">
                                    <p:selectOneRadio id="tipoPessoaSelectOneMenu" value="#{ managerCriarPessoa.pessoa.tipoPessoa }"
                                                      rendered="#{ managerCriarPessoa.pessoa.id == null }">
                                        <f:selectItems value="#{ enums.tiposPessoa() }" />
                                        <p:ajax event="change" update="dadosFieldset" oncomplete="widthFix();" />
                                    </p:selectOneRadio>
                                </div>
                            </div>

                            <p:panel id="pessoaFisicaPanel" styleClass="noborder"
                                     rendered="#{ managerCriarPessoa.pessoa.tipoPessoa eq 'FISICA' }">
                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="Nome" for="nomeInputText" />
                                    </div>
                                    <div class="column10">
                                        <p:inputText id="nomeInputText" value="#{ managerCriarPessoa.pessoa.nome }"
                                                     required="true" requiredMessage="Nome é obrigatório" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="CPF" for="cpfInputMask" />
                                    </div>
                                    <div class="column4">
                                        <p:inputMask id="cpfInputMask" value="#{ managerCriarPessoa.pessoa.cpf  }"
                                                     mask="999.999.999-99" />
                                    </div>                             

                                    <div class="column2">
                                        <p:outputLabel value="RG" for="rgInputText" />
                                    </div>
                                    <div class="column4">
                                        <p:inputText id="rgInputText" value="#{ managerCriarPessoa.pessoa.rg  }" />
                                    </div>   
                                </div>

                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="Data de Nascimento" />
                                    </div>
                                    <div class="column4">
                                        <p:calendar id="dataVigorCalendar" value="#{ managerCriarPessoa.pessoa.dataNascimento }"
                                                    showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" yearRange="1900:c+10" />
                                    </div>

                                    <div class="column2">
                                        <p:outputLabel value="Estado Civil" for="estadoCivilSelectOneMenu" />
                                    </div>
                                    <div class="column4">
                                        <p:selectOneMenu id="estadoCivilSelectOneMenu" value="#{ managerCriarPessoa.pessoa.estadoCivil }">
                                            <f:selectItems value="#{ enums.estadosCivis() }" />
                                        </p:selectOneMenu>
                                    </div>                            
                                </div>

                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="Sexo" for="sexoSelectOneRadio" />
                                    </div>
                                    <div class="column4">
                                        <p:selectOneRadio id="sexoSelectOneRadio" value="#{ managerCriarPessoa.pessoa.sexo }">
                                            <f:selectItems value="#{ enums.sexos() }" />
                                        </p:selectOneRadio>
                                    </div>

                                    <div class="column2">
                                        <p:outputLabel value="Profissão" for="profissaoInputText" />
                                    </div>
                                    <div class="column4">
                                        <p:inputText id="profissaoInputText" value="#{ managerCriarPessoa.pessoa.profissao  }" />
                                    </div>
                                </div>

                            </p:panel>

                            <p:panel id="dadosPessoaJuridica" styleClass="noborder"
                                     rendered="#{managerCriarPessoa.pessoa.tipoPessoa eq 'JURIDICA'}">
                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText" />
                                    </div>
                                    <div class="column10">
                                        <p:inputText id="nomeFantasiaInputText" value="#{ managerCriarPessoa.pessoa.nome }"
                                                     required="true" requiredMessage="Nome Fantasia é obrigatório" />                                
                                    </div>
                                </div>

                                <div class="row">    
                                    <div class="column2">
                                        <p:outputLabel value="Razão Social" for="razaoSocialInputText" />
                                    </div>
                                    <div class="column10">
                                        <p:inputText id="razaoSocialInputText" value="#{ managerCriarPessoa.pessoa.razaoSocial }"
                                                     required="true" requiredMessage="Razão é obrigatório" />
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="CNPJ" for="cnpjInputMask" />
                                    </div>
                                    <div class="column5">
                                        <p:inputMask id="cnpjInputMask" value="#{ managerCriarPessoa.pessoa.cnpj  }"
                                                     required="true" requiredMessage="CNPJ é obrigatório" mask="99.999.999/9999-99" />                                
                                    </div>
                                </div>                        
                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="Responsável" for="responsavelInputText" />
                                    </div>
                                    <div class="column5">
                                        <p:inputText id="responsavelInputText" value="#{ managerCriarPessoa.pessoa.responsavel  }" />
                                    </div>
                                    <div class="column1">
                                        <p:outputLabel value="Email" for="emailInputText" />
                                    </div>
                                    <div class="column4">
                                        <p:inputText id="emailInputText" value="#{ managerCriarPessoa.pessoa.email  }"/>
                                    </div>
                                </div>
                            </p:panel>
                        </div>
                        <div class="column2" style="text-align: center;">
                            <p:panel id="avatar" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">
                                <p:graphicImage id="avatar1" styleClass="image grid_3" 
                                                style="margin-left:1%; width: 120px;" 
                                                alt="#{managerCriarPessoa.imagem.id}" title="#{managerCriarPessoa.imagem.id}"
                                                url="#{managerCriarPessoa.imagem.id eq null ? '':'show/?annex='}
                                                #{managerCriarPessoa.imagem.id eq null ? 'media/images/avatar.jpg': 
                                                  managerCriarPessoa.imagem.id}" />
                                <div class="clear"></div>


                                <p:commandButton value="Capturar" icon="ui-icon-image" onclick="capt.show();"  
                                                 process="@this" update="@this, :formdialog:imagePanel"
                                                 styleClass="grid_23" immediate="true"/>


                                <p:remoteCommand name="updateavatar" process="@this" update="avatar1" />
                            </p:panel>


                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Endereço">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do endereço" for="tipoEnderecoInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoEnderecoInputText" value="#{ managerCriarPessoa.pessoa.endereco.tipo  }">
                                <f:selectItems value="#{ enums.tiposEndereco() }" />
                            </p:selectOneMenu>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do logradouro" for="tipoLogradouroInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoLogradouroInputText" value="#{ managerCriarPessoa.pessoa.endereco.tipoLogradouro  }">
                                <f:selectItems value="#{ enums.tiposLogradouro() }" />
                            </p:selectOneMenu>
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Localidade" for="localidadeInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="localidadeInputText" value="#{ managerCriarPessoa.pessoa.endereco.localidade }"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInputText" value="#{ managerCriarPessoa.pessoa.endereco.numero  }"/>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Logradouro" for="logradouroInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="logradouroInputText" value="#{ managerCriarPessoa.pessoa.endereco.logradouro }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Bairro" for="bairroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="bairroInputText" value="#{ managerCriarPessoa.pessoa.endereco.bairro }" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="CEP" for="cepInputMask" />
                        </div>
                        <div class="column5">
                            <p:inputMask id="cepInputMask" value="#{ managerCriarPessoa.pessoa.endereco.cep  }"
                                         mask="99.999-999" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Cidade" for="cidadeAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="cidadeAutoComplete" value="#{ managerCriarPessoa.pessoa.endereco.cidade }"
                                            forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                            itemLabel="#{ cidade.nome }" completeMethod="#{ managerCriarPessoa.autocompletarCidade }"
                                            converter="conversorcidade" minQueryLength="3" required="true" requiredMessage="Cidade é obrigatório" /> 
                        </div>
                    </div>

                </p:fieldset>

                <p:fieldset legend="Firma" id="anexoFirmaFieldset">

                    <p:fileUpload
                        auto="true"
                        mode="advanced"
                        label="Carregar Fichas de Assinatura"
                        uploadLabel="Enviar"
                        cancelLabel="Cancelar"
                        fileUploadListener="#{  managerCriarPessoa.adicionarFichas  }"
                        multiple="true"
                        allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|xls|xlsx|pdf|)$/"
                        dragDropSupport="true"
                        invalidFileMessage="Tipo de arquivo não suportado."
                        invalidSizeMessage="Tamanho do arquivo não é suportado"
                        process="@this"
                        update="@this, :cadastrarPessoaForm:anexoFirmaFieldset" />

                    <ui:repeat value="#{  managerCriarPessoa.fichasAssinatura }" var="ficha">
                        <p:panel styleClass="thumbnail">
                            <p:commandButton id="removeButton" alt="Remover" label="Remover" title="Remover"
                                             process="@this" styleClass="ui-button-only ui-priority-primary button-remove"
                                             icon="ui-icon-trash" update=":cadastrarPessoaForm:anexoFirmaFieldset"
                                             actionListener="#{ managerCriarPessoa.removerFichas(ficha) }" />

                            <h:outputLink
                                value="#{  ficha.tipo ne 'application/pdf' ? 'viewImage.xhtml' : 'show'  }" title="#{  ficha.nomeExibicao  }"  target="_blank">

                                <p:graphicImage rendered="#{  managerImagem.imagem(ficha)  }"
                                                url="#{  managerImagem.urlThumbnailImagem(ficha)  }" />
                                <p:outputLabel styleClass="nome_anexo" value="#{  managerImagem.nomeAnexo(ficha)  }"
                                               rendered="#{  managerImagem.imagem(ficha)  }"/>
                                <p:graphicImage height="100" width="100" rendered="#{  managerImagem.PDF(ficha)  }" 
                                                url="#{  managerImagem.urlPDF  }" />
                                <p:outputLabel value="#{  managerImagem.nomeAnexoPdf(ficha)  }" 
                                               rendered="#{  managerImagem.PDF(ficha)  }"/>
                                <f:param name="annex" value="#{ managerImagem.urlVisualziarImagem(ficha) }"/>

                            </h:outputLink>

                        </p:panel>
                    </ui:repeat>

                </p:fieldset>

                <p:fieldset legend="Anexos" id="anexoFieldset">

                    <p:fileUpload
                        auto="true"
                        mode="advanced"
                        label="Anexar"
                        uploadLabel="Enviar"
                        cancelLabel="Cancelar"
                        fileUploadListener="#{  managerCriarPessoa.adicionarAnexos }"
                        multiple="true"
                        allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|xls|xlsx|pdf|)$/"
                        dragDropSupport="true"
                        invalidFileMessage="Tipo de arquivo não suportado."
                        invalidSizeMessage="Tamanho do arquivo não é suportado"
                        process="@this"
                        update="@this, :cadastrarPessoaForm:anexoFieldset" />

                    <ui:repeat value="#{  managerCriarPessoa.anexos }" var="anexo">
                        <p:panel styleClass="thumbnail">
                            <p:commandButton id="removeButton" alt="Remover"  label="Remover" title="Remover"
                                             process="@this" styleClass="ui-button-only ui-priority-primary button-remove"
                                             icon="ui-icon-trash" update=":cadastrarPessoaForm:anexoFieldset"
                                             actionListener="#{ managerCriarPessoa.removerAnexo(anexo) }" />

                            <h:outputLink
                                value="#{  anexo.tipo ne 'application/pdf' ? 'viewImage.xhtml' : 'show'  }" title="#{  anexo.nomeExibicao  }"  target="_blank">

                                <p:graphicImage rendered="#{  managerImagem.imagem(anexo)  }"
                                                url="#{  managerImagem.urlThumbnailImagem(anexo)  }" />
                                <p:outputLabel styleClass="nome_anexo" value="#{  managerImagem.nomeAnexo(anexo)  }"
                                               rendered="#{  managerImagem.imagem(anexo)  }"/>
                                <p:graphicImage height="100" width="100" rendered="#{  managerImagem.PDF(anexo)  }" 
                                                url="#{  managerImagem.urlPDF  }" />
                                <p:outputLabel value="#{  managerImagem.nomeAnexoPdf(anexo)  }" 
                                               rendered="#{  managerImagem.PDF(anexo)  }"/>
                                <f:param name="annex" value="#{ managerImagem.urlVisualziarImagem(anexo) }"/>

                            </h:outputLink>

                        </p:panel>
                    </ui:repeat>

                </p:fieldset>

                <div class="command">
                    <p:commandButton actionListener="#{ managerCriarPessoa.salvarClienteFirma() }"
                                     styleClass="ui-priority-primary"
                                     value="Salvar" update="@form" icon="ui-icon-disk"
                                     oncomplete="widthFix();" onsuccess="goY(0);" />
                    <p:button value="Cancelar" href="pesquisarCliente.xhtml" icon="ui-icon-cancel" />
                </div>                    

            </h:form>
            <h:form id="formdialog">
                <p:dialog id="depositanteDialog" widgetVar="depositanteDialog" header="Buscar Depositante" dynamic="true"
                          modal="true" appendToBody="false" resizable="false" width="90%" height="450px" 
                          draggable="false" closable="false">

                    <p:tabView id="depositanteTabView" >

                        <p:tab id="pesquisarFiadorTab" title="Pesquisar">

                            <fieldset>
                                <legend> <h4 style="margin:0 0 10px 0">Filtros</h4></legend>
                                <p:panel id="depositantePesquisarPanel" styleClass="column12, clearfix"
                                         style="background: none; border: none">

                                    <div class="row">
                                        <div class="selectionBox">
                                            <p:selectOneRadio id="tipoPessoaFiadorSelectOneMenu" 
                                                              value="#{managerCriarPessoa.depositantePesquisar.tipoPessoa}">
                                                <f:selectItems value="#{enums.tiposPessoa()}" />   
                                                <p:ajax event="change"
                                                        update=":formdialog:depositanteTabView:depositantePesquisarPanel" 
                                                        listener="#{ managerCriarProtesto.limparFiador() }" />
                                            </p:selectOneRadio>
                                        </div>
                                    </div>

                                    <f:validateBean disabled="true">
                                        <div class="row">
                                            <div class="column1">
                                                <p:outputLabel value="Nome" for="nomeFiadorInputText"  />
                                            </div>
                                            <div class="column5">
                                                <p:inputText id="nomeFiadorInputText" 
                                                             value="#{ managerCriarPessoa.depositantePesquisar.nome }" />
                                            </div>

                                            <div class="column1">
                                                <p:outputLabel value="CPF" for="cpfFiadorInputMask" 
                                                               rendered="#{ managerCriarPessoa.depositantePesquisar.tipoPessoa eq 'FISICA'}" />
                                            </div>
                                            <div class="column3">
                                                <p:inputMask id="cpfFiadorInputMask" 
                                                             value="#{ managerCriarPessoa.depositantePesquisar.cpf }"
                                                             rendered="#{ managerCriarPessoa.depositantePesquisar.tipoPessoa eq 'FISICA'}" mask="999.999.999-99" />
                                            </div>
                                            <div class="column1">
                                                <p:outputLabel value="CNPJ" for="cnpjFiadorInputMask"
                                                               rendered="#{ managerCriarPessoa.depositantePesquisar.tipoPessoa eq 'JURIDICA'}" />
                                            </div>
                                            <div class="column3">
                                                <p:inputMask id="cnpjFiadorInputMask" value="#{ managerCriarPessoa.depositantePesquisar.cnpj }"
                                                             rendered="#{ managerCriarPessoa.depositantePesquisar.tipoPessoa eq 'JURIDICA'}" mask="99.999.999/9999-99" />
                                            </div>
                                        </div>
                                    </f:validateBean>

                                    <div class="buttonAction">
                                        <p:commandButton actionListener="#{ managerCriarPessoa.pesquisarDepositante() }" 
                                                         value="Pesquisar"
                                                         update=":formdialog:depositanteTabView:depositantePesquisarPanel" 
                                                         process=":formdialog:depositanteTabView:depositantePesquisarPanel"
                                                         icon="ui-icon-search" />
                                    </div>

                                    <p:dataTable id="depositantesDataTable" var="pessoafiador" value="#{ managerCriarPessoa.listDepositante }" 
                                                 rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ pessoafiador.id }"
                                                 selection="#{ managerCriarPessoa.depositanteSelecionado }" selectionMode="single"
                                                 emptyMessage="Nenhum devedor encontrado">
                                        <f:facet name="header">Clientes</f:facet>
                                        <p:ajax event="rowSelect"  process="@this" update="@this"/>

                                        <p:column headerText="Nome" width="700">
                                            <h:outputText value="#{ pessoafiador.nome }" />
                                        </p:column>
                                        <p:column headerText="#{managerCriarProtesto.fiadorPesquisar.tipoPessoa eq 'FISICA' ? 'CPF' : 'CNPJ'}" width="300">
                                            <h:outputText value="#{ pessoafiador.tipoPessoa eq 'FISICA' ? managerPesquisarPessoa.adicionarMascaraCPF(pessoafiador.cpf) :
                                                                    managerPesquisarPessoa.adicionarMascaraCNPJ(pessoafiador.cnpj) }" />
                                        </p:column>
                                    </p:dataTable>

                                    <div class="buttonAction">
                                        <p:commandButton actionListener="#{ managerCriarPessoa.selecionarDepositante() }"
                                                         update=":cadastrarPessoaForm, @form" 
                                                         process="@this"
                                                         value="Selecionar" icon="ui-icon-plus" />

                                        <p:commandButton value="Cancelar" icon="ui-icon-cancel" onclick="dialogFiador.hide();" 
                                                         process="@this"
                                                         update=":cadastrarPessoaForm, @form" 
                                                         actionListener="#{ managerCriarPessoa.instanciarDepositantePesquisar() }" />
                                    </div>

                                </p:panel>
                            </fieldset>

                        </p:tab>
                    </p:tabView>
                </p:dialog>
                <p:dialog id="image" dynamic="true" header="Captura de Imagem" modal="true" widgetVar="capt">  
                    <p:panel id="imagePanel" style="background: none; border: none;" 
                             styleClass="container_24 clearfix ">
                        <p:photoCam widgetVar="pc" update="@form" listener="#{managerCriarPessoa.oncapture}"/>
                        <div class="clear"></div>
                        <p:commandButton value="Capturar" onclick="pc.capture();" 
                                         process="@this" update="@this, :cadastrarPessoaForm:imagePanel" icon="ui-icon-check"
                                         styleClass="grid_24" oncomplete="capt.hide();"/>
                    </p:panel>
                </p:dialog>
            </h:form>

        </ui:define>
    </ui:composition>

</html>
